import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Image, ScrollView} from '@tarojs/components'
import LazyLoad from '@/utils/lazyLoadImg'
import classNames from 'classnames'
import './index.scss'


function lazy(obj) {
  setTimeout( () => {
    if (obj) return 'active'
    return ''
  })
}

let lazyloadImg
type State = {
  list: Array<any>
  loadDone: boolean
  isShowNoData: boolean
  __LAZT_LOAD_COUNT: number
  background: string
};
export default class Lazy extends Component<{}, State> {
    protected fngradient: any = null
    public ref: any = null

    constructor (props) {
      super(props)
      this.state = {
        loadDone: false,
        isShowNoData: false,
        __LAZT_LOAD_COUNT: 5,
        background: 'rgba(255,255,255,1)',
        list: [
          {
            url: 'https://cdn.pixabay.com/photo/2019/12/07/14/57/christmas-tree-4679463__480.jpg?test33',
            load: false,
          },
          {
            url: 'https://cdn.pixabay.com/photo/2019/12/13/08/27/snow-4692469__480.jpg?test33',
            load: false
          },
          {
            url: 'https://cdn.pixabay.com/photo/2016/01/29/16/57/prague-1168302__480.jpg?test33',
            load: false
          },
          {
            url: 'https://cdn.pixabay.com/photo/2019/12/09/08/06/couple-4682956__480.jpg?test33',
            load: false
          },
          {
            url: 'https://cdn.pixabay.com/photo/2019/12/15/13/58/christmas-4697165__480.jpg?test33',
            load: false
          },
          {
            url: 'https://cdn.pixabay.com/photo/2019/12/05/06/27/waterfalls-4674389__480.jpg?test33',
            load: false
          },
          {
            url: 'https://cdn.pixabay.com/photo/2019/12/15/19/22/christmas-4697923__480.jpg?test33',
            load: false
          },{
            url:  'https://cdn.pixabay.com/photo/2018/10/16/17/24/dog-3751980__480.jpg?test33',
            load: false
          },
          {
            url: 'https://cdn.pixabay.com/photo/2017/12/05/05/34/gifts-2998593__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/index/2019/12/10/13-14-35-755_1440x480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2019/12/15/13/01/couple-4697055__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2019/12/15/19/46/lisbon-4697955__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2019/12/14/15/05/mountains-4695049__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2019/12/14/18/29/night-4695490__480.jpg?test33',
            load: false
          }
          ,{
            url: 'https://cdn.pixabay.com/photo/2019/12/15/08/14/body-painting-4696539__480.jpg?test33',
            load: false
          }
          ,{
            url: 'https://cdn.pixabay.com/photo/2015/12/06/20/10/christmas-bauble-1079926__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2015/12/06/20/10/christmas-bauble-1079926__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2015/12/06/20/10/christmas-bauble-1079926__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2015/12/06/20/10/christmas-bauble-1079926__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2015/12/06/20/10/christmas-bauble-1079926__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2015/12/06/20/10/christmas-bauble-1079926__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2015/12/06/20/10/christmas-bauble-1079926__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2015/12/06/20/10/christmas-bauble-1079926__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2015/12/06/20/10/christmas-bauble-1079926__480.jpg?test33',
            load: false
          },{
            url: 'https://cdn.pixabay.com/photo/2015/12/06/20/10/christmas-bauble-1079926__480.jpg?test33',
            load: false
          }
        ]
      }
    }
    UNSAFE_componentWillMount() {
      const { __LAZT_LOAD_COUNT } = this.state
      lazyloadImg = new LazyLoad(this, {
        classNote: '.item-', //循环节点
        initNum: 5,	//初始化展示多少个节点
        limit: __LAZT_LOAD_COUNT //每次加载多少个节点
      })
    }
    componentDidMount() {
      lazyloadImg.observe();
      this.setState({
        __LAZT_LOAD_COUNT: 5
      })
      console.log(
        'this.ref',
        this.ref,
        this.ref.state.configStyle.navBarHeight , this.ref.state.configStyle.navBarExtendHeight
      );
    }
    onPageScroll(e) {
    }
    handleAddCar() {
      Taro.navigateTo({
        url: '/pages/car/add/index?type=1'
      })
    }
    handleLoad(index, e) {
      const { list } = this.state
      this.state.list[index].load = true
      this.forceUpdate()
      this.setState(prevState => ({
        list: [{
          [prevState.list[index].load]: true,
          }
        ]
      }));
      list[index].load = true
      this.setState({
        list
      })
      console.log(index, e)
    }

    render() {
      const { list, __LAZT_LOAD_COUNT} = this.state
      console.log('list', list)
        return (
          <View >
          <ScrollView
            scrollY
            style='height: 100%'
            className='index-list'
          >
                { list.map((item, index) =>
                  <View key={item.url} className={'item-' + index} style='display: flex;justify-content: flex-start;'>
                    <Image
                      style={{'marginTop': '20rpx', width: '300rpx', height: '300rpx',
                      // 'backgroundColor': '#eeeeee',
                      //display: (index < __LAZT_LOAD_COUNT + 1) ? 'inline-block' : 'none'
                      }}
                      mode='scaleToFill'
                      className={
                        classNames({'active' : item.load})
                      }
                      // lazyLoad={true}
                      onLoad={this.handleLoad.bind(this, index)}
                      src={(index < __LAZT_LOAD_COUNT + 1) ? item.url: ''}
                    >
                    </Image>
                  </View>
                )}
          </ScrollView>
          </View>
        )
    }
}
